<template>
  <div class="SingleSetView">
    <!-- 返回栏 -->
    <van-nav-bar @click-left="Goreturn" left-arrow>
      <template #right>
        <van-icon
          v-show="Subscribe_iconShow"
          color="black"
          size="22"
          name="label-o"
        />
        <van-icon
          v-show="!Subscribe_iconShow"
          color="black"
          size="22"
          name="label"
        />
      </template>
    </van-nav-bar>

    <!-- 内容模块 -->
    <div class="SingleSetView_content">
      <!-- 作者寄语/推介语 -->
      <div class="SingleSetView_catalog_title">
        {{ SingleSetContent.catalog_title }}
      </div>
      <!-- 节目 和 跳转 -->
      <div class="SingleSetView_program">
        <img :src="SingleSetContent.small_background_img" alt="" />
        <div>
          <p>{{ SingleSetContent.author }}</p>
          <p>{{ SingleSetContent.title }}</p>
        </div>
      </div>

      <!-- 大标题 -->
      <h2>{{ SingleSetContent_part.title }}</h2>
      <content-audio :Contentpart="SingleSetContent_part"></content-audio>
      <!-- 内容部分 -->
      <div
        class="SingleSetContent_part_content"
        v-html="SingleSetContent_part.content"
      ></div>

      <!-- 本集编辑 -->
      <div class="SingleSetContent_part_bot">
        <p>本集编辑：{{ SingleSetContent_part.part_author }}</p>
        <p>{{ SingleSetContent_part.update_date }}</p>
      </div>
    </div>
    <van-divider />
    <!-- 底部相关推荐 -->
    <div class="SingleSetView_Featured">
      <p class="SingleSetView_Featured_title">精选推荐</p>
      <div
        v-for="item in SingleSetContent.relate_contents"
        :key="item.content_id"
        class="SingleSetView_Featured_item"
        @click="GoBookDetails(item.content_id)"
      >
        <img :src="item.small_background_img" alt="" />
        <div>
          <van-divider
            content-position="left"
            :style="{
              color: '#ccc',
              borderColor: '#ccc',
              margin: '0',
            }"
          >
            {{ item.author }}
          </van-divider>
          <p>{{ item.title }}</p>
          <p>{{ item.subtitle }}</p>
          <div class="ingleSetView_Featured_price">
            <span>￥{{ item.complete_class_price }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SingleSetView } from "@/api/request";
import ContentAudio from "@/components/SingleSetView/ContentAudio.vue";
export default {
  components: { ContentAudio },
  name: "SingleSetView",
  data() {
    return {
      // 当页请求id
      article_id: 0,
      // 节目也请求id
      content_id: 0,
      // 节目内容数组
      SingleSetContent: [],
      // 音频 和 全部文字内容
      SingleSetContent_part: [],
      // 返回栏的的订阅
      Subscribe_iconShow: true,
    };
  },
  activated() {
    // 路由跳转过来带来的参数
    this.article_id = this.$route.query.article_id;
    this.content_id = this.$route.query.content_id;
    console.log("节目请求路由传参id", this.$route.query);

    // 带着id 发送请求
    SingleSetView({
      article_id: this.article_id,
    }).then(({ data }) => {
      this.SingleSetContent = data.data;
      this.SingleSetContent_part = data.data.part[0];
      // 输出请求到的
      // console.log("全部数据", this.SingleSetContent);
      console.log("页面文字歌曲数据", this.SingleSetContent_part);
    });
  },
  methods: {
    // 顶部返回
    Goreturn() {
      this.$router.go(-1);
    },
    // 底部推荐 跳转到节目详情页
    GoBookDetails(id) {
      console.log(id);
      this.$router.push({
        path: "/BookDetails",
        query: {
          id,
        },
      });
    },
  },
};
</script>
<style lang="scss" >
.SingleSetView {
  height: 100%;
  // 返回栏
  .van-nav-bar {
    .van-nav-bar__left {
      .van-nav-bar__arrow {
        color: black;
      }
    }
  }
  // 内容box
  .SingleSetView_content {
    padding: 0 0.875rem;
    background-color: white;

    // 小标题
    .SingleSetView_catalog_title {
      color: var(--fontcolor);
      font-size: 0.8125rem;
      &::before {
        content: "";
        display: inline-block;
        width: 0.25rem;
        height: 1rem;
        vertical-align: middle;
        border-left: 0.25rem solid #2d4d6e;
      }
    }

    // 小块节目内容
    .SingleSetView_program {
      display: flex;
      background-color: #fbfbfb;
      margin: 0.625rem 0;
      img {
        width: 2.5rem;
        height: 3.125rem;
      }
      div {
        font-size: 0.8125rem;
        margin-left: 0.625rem;
        padding: 0.375rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        p:nth-child(2) {
          font-weight: bold;
        }
      }
    }

    // 大标题
    h2 {
      line-height: 1.5rem;
      margin: 0.625rem 0;
    }
    // 文章内容
    .SingleSetContent_part_content {
      white-space: pre-wrap;
      font-size: 0.75rem;
      line-height: 1.5rem;
      color: #333;
      // margin: 1.25rem 0;
      strong {
        font-weight: bold;
      }
      img {
        width: 100%;
        height: 16.25rem;
      }
    }

    // 文章底部的信息
    .SingleSetContent_part_bot {
      color: var(--fontcolor);
      font-size: 0.75rem;
      margin-top: 1.25rem;
      p {
        line-height: 1.25rem;
      }
    }
  }
  // 底下精选推荐
  .SingleSetView_Featured {
    padding: 0.625rem 0.875rem;

    // 精选推荐标题
    .SingleSetView_Featured_title {
      margin: 1.25rem 0;
    }

    .SingleSetView_Featured_item {
      display: flex;
      margin: 1.25rem 0;
      img {
        width: 6.25rem;
      }
      div:nth-child(2) {
        width: 100%;
        margin-left: 0.625rem;
        position: relative;
        p {
          line-height: 1.375rem;
        }
        p:nth-child(2) {
          font-size: 0.875rem;
        }
        p:nth-child(3) {
          font-size: 0.75rem;
          color: var(--fontcolor);
        }
        .ingleSetView_Featured_price {
          position: absolute;
          bottom: 0;
          font-size: 0.875rem;
          span {
            color: #ca4703;
          }
        }
      }
    }
  }
}
</style>